<!-- 多商品首页 -->
<template>
	<view class="content page">
		<status-bar :title='title' :goHome='fromShare'></status-bar>
		<backTop v-if='toTop'></backTop>
		<!-- 导航 start -->
		<view id="nav">
			<view class="nav_item thmeBg" :style="{'--color': color}" style="position: relative;">
				<view class="flex-box align-center flex-center" style="height: 100%;" @click="contact">
					<text class="iconfont icon-conversation_icon"></text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="contact" bindcontact="handleContact" class="btn-contact" v-if="service_state != 1"></button>
				<!-- #endif -->
			</view>
			<view class="nav_item thmeBg flex-box align-center flex-center" :style="{'--color': color}" @click="toOrderList('/pages/index/orderList')">
				<text class="iconfont icon-dingdan"></text>
			</view>
			<view class="nav_item thmeBg flex-box align-center flex-center" :style="{'--color': color}" @click="toOrderList('/activityPage/join/i_join')" v-if='pageData.act_join_act == 1'>
				<text class="iconfont icon-hezuo"></text>
			</view>
		</view>

		<!-- 分享 -->
		<view class="shareBox" v-show='!showShare' @click="showShare=true">
			<image :src="staticUrl+'/images/cat.gif'" mode=""></image>
		</view>
		
		<view>
			<view class="top_oper" :style="{top: 'calc(100rpx + '+navHeight+System.statusBarHeight + 'px)'}">
				<!-- 分销模式 -->
				<button v-if="mode != 0" :class="{shareAni:showShare,hideAni:!showShare}"
				 @click="toOrderList('/moneyPage/capital/myMoney')" class="thmeBg top_oper_item money share_btn" :style="{'--color': color}">
					<image :src="staticUrl+'/images/money_ico.png'" mode="aspectFit"></image>
				</button>
				<!-- 普通模式 -->
				<button :class="{shareAni1:showShare,hideAni1:!showShare}"
				 @click="toOrderList('share')" class="thmeBg top_oper_item money share_btn" :style="{'--color': color}">
					<image :src="staticUrl+'/images/share_ico.png'" mode="aspectFit"></image>
				</button>
			</view>
			<!-- 顶部操作 end -->
			<view class="goods_swiper">
				<view class="goods_swiper_list swiper-container" v-if="pageData.act_photo">
					<view class="swiper-pagination pagination goods_swiper_pagination">{{positions}} / {{pageData.act_photo.length}}</view>
					<swiper class="swiper__main" autoplay="true" circular="true" interval="3000" duration="500" @change="numFunc">
						<block v-for="(item,index) in pageData.act_photo" :key="index">
							<swiper-item class="swiper__cell">
								<image class="swiper__img" @click="previewimages(index,pageData.act_photo)" :src="imgUrl+item" mode="aspectFill"></image>
							</swiper-item>
						</block>
					</swiper>
				</view>
			</view>

			<!--show_time:1 要显示时间和判断活动的开始结束   goods_state：活动状态 2未开始 1进行中 0已结束-->
			<template v-if='pageData.show_time == 1'>
				<view class="timing activity_timing" v-if='pageData.goods_state == 1 || pageData.goods_state == 2'>
					<p class="timing_text" v-if='pageData.goods_state == 1'>距离活动结束还剩：</p>
					<p class="timing_text" v-if='pageData.goods_state == 2'>距离活动开始还有：</p>
					<view class="timing_c">
						<text class="timing_day" v-if='days > 0'>{{days}}天</text>
						<text class="timing_h">{{hours}}</text>:
						<text class="timing_i">{{minutes}}</text>:
						<text class="timing_s">{{seconds}}</text>
					</view>
				</view>
				<view class="statebar color2" v-if="pageData.goods_state == 0">活动已结束</view>
			</template>

			<view class="goods_visitor" v-if="pageData.act_show_browse == 1">
				<view class="goods_visitor_info">
					<view>最近浏览</view>
					<view class="goods_visitor_num">已有{{pageData.count?pageData.count:1}}人/次浏览</view>
				</view>
				<view class="goods_visitor_list" v-if='pageData.headimg && pageData.headimg.headimg'>
					<view class="g_v_list_box">
						<image v-for="(item,index) in pageData.headimg.headimg" :key="index" v-if="item" :src="item" mode="aspectFit"
						 class="g_v_avatar"></image>
					</view>
				</view>
			</view>
			<view class="center_box"></view>
		</view>

		<!-- 商品信息 -->
		<view class="goods" :style="navFixed?'padding-top: 44px;':'padding-top: 0;'">
			<view class="goods_filter" :class="navFixed?'navFixeds':''">
				<view class="goods_filter_list">
					<view class="g_filter_item flex-box align-center" @click="commodityNav(0)"
					 :class="{ thmeColor:action==0}" :style="{'--color': color}">
						<text class="g_filter_item_c">价格</text>
						<view>
							<text class="icon-shangsanjiaoxing iconfont" :class="{thmeColor: priceToTop == 1}" :style="{'--color': color}"></text>
							<text class="icon-xiasanjiaoxing iconfont" :class="{thmeColor: priceToTop == 2}" :style="{'--color': color}"></text>
						</view>
					</view>
					<view class="g_filter_item flex-box align-center" @click="commodityNav(1)" :class="{ thmeColor:action==1 }" :style="{'--color': color}">
						<text class="g_filter_item_c">销量</text>
					</view>
					<view class="g_filter_item flex-box align-center" @click="commodityNav(2)" :class="{ thmeColor:action==2 }" :style="{'--color': color}">
						<text class="g_filter_item_c" >热度</text>
					</view>
				</view>
				<view class="changeBtn" @click="toggleCss">
					<image v-if='!togClass' :src="staticUrl+'/images/menu2_ico.png'" class="changeIcon"></image>
					<image v-else :src="staticUrl+'/images/menu_ico.png'" class="changeIcon"></image>
				</view>
			</view>
			

			<view v-show='togClass' style="background-color: #FFFFFF;" class="m-top20">
				<GoodsList hot='1' v-show='goodsList' :goodsData='goodsList' type='1'></GoodsList>
				<view class="DiLine" v-if='showLine'>------- 我也是有底线的 -------</view>
			</view>
			<view v-show='!togClass' style="background-color: #FFFFFF;">
				<GoodsList hot='1' v-show='goodsList' :goodsData='goodsList' type='2'></GoodsList>
				<view class="DiLine" v-if='showLine'>------- 我也是有底线的 -------</view>
			</view>
			<empty v-if='noData' cat='4' msg='还没有相关商品哦~'></empty>
		</view>
		
		<showModel @cancelFunc='showModal=false' v-if='showModal' type='2'></showModel>
		<!-- 分享海报 -->
		<SharePoster v-if='showShareQr' :myid='actid' type='3' :pageType='"9&act_id="+actid' @closePoster='showShareQr=false'></SharePoster>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import SharePoster from "../../components/sharePoster.vue"
	import GoodsList from '../../components/goodsList.vue'
	import API from '../../api/index.js'
	var that;
	export default {
		components: {
			GoodsList,
			SharePoster
		},
		data() {
			return {
				
				color: getApp().globalData.color,
				hideCat: getApp().globalData.hideCat, // 是否关闭猫咪
				days: 0,
				hours: 0,
				minutes: 0,
				seconds: 0,
				toTop: false,
				positions: 1,
				
				togClass: true,
				navFixed: false,
				loadingBox: false,
				noData: true,
				action: 0,
				priceToTop:1, //1价格由低到高 2价格由高到低 
				actid: '',
				pageData: '',
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				state: 1,
				datapage: 1,
				loadingBoxM: false,
				
				pagenum: 10,
				mode: uni.getStorageSync('mode'),
				showShare: false, // 显示分享图标
				
				bid: uni.getStorageSync('bid'),
				showModal: false, // 是否显示模态框
				goodsList: [],
				showShareQr: false, // 展示分享二維碼
				showLine: false,
				title: uni.getStorageSync('startUp').title,
				service_state: uni.getStorageSync('startUp').service_state,// 是否开起客服系统
				fromShare:0, // 是否来自分享 1是 显示返回首页
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				that.toTop = true;
				if (that.hideCat != true) {
					that.showShare = false;
				}
			} else {
				that.toTop = false
				that.showShare = true;
			}
			uni.createSelectorQuery().select(".goods").boundingClientRect((res) => {
				if (res.top <= 0) {
					that.navFixed = true
				} else {
					that.navFixed = false
				}
			}).exec();
		},
		onReachBottom() {
			if (that.loadingBoxM) {
				that.datapage = that.datapage + 1
				that.getSingle()
			}
		},
		onLoad(e) {
			that = this;
			that.actid = e.act_id;
			uni.setNavigationBarTitle({
				title: that.title
			})
			that.getInitialData()
			that.getSingle();
			
			if (e.fromShare)
				that.fromShare = e.fromShare
		},
		methods: {
			previewimages: function(i, imgArry) {
				let imageUrls = [];
				for (let ind in imgArry) {
					imageUrls.push(that.imgUrl + imgArry[ind])
				}
				uni.previewImage({
					current: i,
					urls: imageUrls,
					indicator: "number",
					loop: true
				})
			},
			toOrderList: function(url) {
				var vid = uni.getStorageSync('vid');
				if (url == 'share') {
					// #ifdef MP-TOUTIAO
					return
					// #endif
					var mode = uni.getStorageSync('mode');
					if (mode != 0) { // 分销模式
						if (!vid || vid == 0) {
							that.showModal = true;
							return
						}
					}
					that.showShareQr = true;
					return
				}
				if (!vid) {
					that.showModal = true;
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			contact: function() {
				var vid = uni.getStorageSync("vid")
				if (vid) {
					if(that.service_state == 1){ // 客服系统
						uni.navigateTo({
							url: "/userPage/message/consult?shop_id=" + that.pageData.store_id
						})
					}else{
						// uni.navigateTo({
						// 	url: "/userPage/onlineService/webHttp?actId=" + that.actid
						// })
						if(!that.pageData.act_service_tel){
							that.pageData.act_service_tel = uni.getStorageSync('startUp').service_tel
						}
						uni.makePhoneCall({
							phoneNumber: that.pageData.act_service_tel
						})
					}
				} else {
					that.showModal = true
				}
			},
			commodityNav: function(i) {
				//商品切换导航
				that.goodsList = [];
				if (i == 0) {
					if (that.state == 1) {
						that.state = 2
					} else {
						that.state = 1
					}
					that.priceToTop = that.state
				} else if (i > 0) {
					that.priceToTop = 0;
				}
				that.action = i;
				that.datapage = 1;
				that.getSingle()
			},
			getSingle: function(i) {
				that.loadingBoxM = false
				that.showLine = false
				that.noData = false
				that.$http.post({
					url: '/singleSaleApi/singleGroups',
					data: {
						act_id: that.actid,
						type: that.action + 1,
						state: that.state,
						page: that.datapage,
						pageNum:  that.pagenum
					}
				}).then(res => {
					if (res.code == 100) {
						if (res.data) {
							that.goodsList = that.goodsList.concat(res.data);
							if (res.data.length > that.pagenum - 1) {
								that.loadingBoxM = true
							}
						}
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 2000
						})
					}
					if(that.goodsList.length > 1 && (res.data.length < that.pagenum ||!res.data)){
						that.showLine = true
					}
					if(that.goodsList.length < 1){
						that.noData = true
					}
				})
			},
			toggleCss: function() {
				that.togClass = !that.togClass
				if(that.togClass){
					that.goodsList = []
					that.datapage = 1
					that.getSingle()
				}
			},
			numFunc: function(e) {
				that.positions = parseInt(e.detail.current) + 1;
			},
			count_down_time: function(start_time) {
				//倒計時方法
				var time = Number(start_time);
				var _setInterval = setInterval(() => {
					// var time = Number($(".activity_timing").attr("data-time"));
					if (time != 0) {
						time--;
					} else {
						clearInterval(_setInterval);
					}
					var day = Math.floor(time / 60 / 60 / 24);
					var hour = Math.floor(time / 60 / 60 % 24) < 10 ? "0" + Math.floor(time / 60 / 60 % 24) : Math.floor(time / 60 /
						60 % 24);
					var minute = Math.floor(time / 60 % 60) < 10 ? "0" + Math.floor(time / 60 % 60) : Math.floor(time / 60 % 60);
					var second = Math.floor(time % 60) < 10 ? "0" + Math.floor(time % 60) : Math.floor(time % 60);
					that.days = day;
					that.hours = hour;
					that.minutes = minute;
					that.seconds = second;
					time = Number(time);
				}, 1000);
			},
			getInitialData: function() { // 获取页面初始数据
				that.$http.post({
					url: '/singleSaleApi/singleMoreGoods',
					data: {
						act_id: that.actid,
					}
				}).then(res => {
					if (res.status) {
						that.pageData = res.data
						uni.setStorageSync("act_state", that.pageData.act_state)
						if (that.pageData.show_time == 1 && that.pageData.goods_state == 1) {
							that.count_down_time(that.pageData.goods_end_time)
						}
						if (that.pageData.show_time == 1 && that.pageData.goods_state == 2) {
							that.count_down_time(that.pageData.goods_start_time)
						}
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 2000
						})
					}
				})
			},
		},
		computed:{
			...mapState(['tabTitle','color','city','navHeight','System','vid','share']),
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid + '&pageType=9&act_id='+that.actid,
				imageUrl: shareData.imageUrl
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav_item {.iconfont{font-size: 36rpx;color: white;}}
	.goods_swiper {height: 750upx;background: #ffffff;position: relative;}
	.swiper__main,.swiper__cell,.swiper__img,.play_video {width: 100%;height: 100%;}
	.goods_swiper_list {position: relative;}

	.goods_swiper_pagination,.full_atlas_pagination {position: absolute;z-index: 9;}
	.navFixeds {position: fixed;left: 0;top: 0;z-index: 1;width: 100%;}

	.g_v_list_box::-webkit-scrollbar {display: none;}

	.center_box {width: 100%;height: 20upx;}
	.nav_item .iconfont{font-size: 40rpx;}
	
	.changeBtn image{width: 44rpx;height: 44rpx;}
	.g_filter_item_c{color: inherit;}
	.icon-shangsanjiaoxing,.icon-xiasanjiaoxing{
		font-size: 20rpx;
		margin: -3rpx 0 -3rpx 6rpx;
		color: #AFAFAF;
		display: block;
	}
</style>
